<template>
	<!-- 方形 -->
	<div
		class="square"
		v-if="props.type === 'square'">
		<up-image
			mode="scaleToFill"
			:lazyLoad="true"
			:show-loading="true"
			:src="props.src"
			width="230"
			height="230"
			:alt="props.musicName"
			radius="50"></up-image>

		<span class="musicName">{{ props.musicName }}</span>

		<div class="playCount">
			<i class="iconfont icon-play"></i>
			{{ numberFormat(props.playCount) }}
		</div>
	</div>

	<!-- 矩形 -->
	<div
		class="rectangle"
		v-else>
		<up-image
			mode="scaleToFill"
			:lazyLoad="true"
			:show-loading="true"
			:src="props.entirety.album.picUrl"
			width="150"
			height="150"
			:alt="props.musicName"
			radius="20"></up-image>
		<div class="musicInfos">
			<strong class="musicName">{{ props.entirety.name }}</strong>
			<span class="musicInfo">
				{{ props.entirety.transName || props.entirety.album.artists[0].name + props.entirety.album.subType }}
			</span>
			<span
				class="tag"
				:style="{ opacity: props.entirety.album.company ? 1 : 0 }">
				{{ props.entirety.album.company }}
			</span>
		</div>

		<div class="favorites">
			<i class="iconfont icon-aixin"></i>
		</div>
	</div>
</template>

<script lang="ts" setup>
import numberFormat from '@/modules/numberFormat';
// 组件Props类型
interface MusicItemProps {
	type?: 'square' | 'rectangle';
	src?: string;
	musicName?: string;
	playCount?: number;
	entirety?: any;
}
// 组件Props类型及默认参数
const props = withDefaults(defineProps<MusicItemProps>(), {
	type: 'square',
	playCount: 0,
});
</script>

<style lang="scss" scoped>
$greyColor: #c4c7c5;
@mixin twoLineEllipsis($width: 80%, $height: 70rpx, $lineCount: 2) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $lineCount;
	-webkit-box-orient: vertical;
	/* 设置宽度和高度 */
	width: $width;
	height: $height;
}
%oneLineEllipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
	white-space: nowrap;
}

.square {
	position: relative;
	display: inline-block;
	width: 230rpx;
	height: 360rpx;

	.musicName {
		margin-top: 10rpx;
		font-size: 28rpx;
		line-height: 1.5;
		@include twoLineEllipsis(auto, 80rpx, 2);
	}

	.playCount {
		position: absolute;
		top: 150rpx;
		left: 8%;
		padding: 5px;
		box-sizing: border-box;
		background-color: rgba($color: #ffffff, $alpha: 0.5);
		backdrop-filter: blur(10px);
		border-radius: 10px;
		color: #fff;
		font-size: 14px;
	}
}

.rectangle {
	display: flex;
	margin: 40rpx 0;
	.musicInfos {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 600rpx;
		padding: 10rpx 25rpx;
		box-sizing: border-box;
		overflow: hidden;
		> * {
			width: 100%;
			@extend %oneLineEllipsis;
		}
		strong {
			font-size: 36rpx;
			font-weight: normal;
		}

		.musicInfo {
			color: #bec1bf;
			font-size: 28rpx;
		}

		.tag {
			width: fit-content;
			padding: 8rpx 20rpx;
			box-sizing: border-box;
			background-color: #f2f7f3;
			color: #579b66;
			font-size: 20rpx;
			margin-top: 16rpx;
			border-radius: 20rpx;
		}
	}

	.favorites {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
	}
}
</style>
